<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>Hello APP</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="./index.css" />
</head>

<body>
    <div id="app">
        <div id="header-normal" class="header-top">
            <div id="header-title" style="width: 50%;float: left;">
                <div class="find-title">
                    <span class="big-title" style="font-size: 16px;">打招呼</span>
                    <span  class="small-title" v-if="user.on_line==2" @click="setStatus(1)">隐身</span>
                    <span  class="small-title" v-else @click="setStatus(2)">在线</span>
                    <img src="../../image/triangle_icon.png" alt="三角形" style="width: 4px;height: 4px;">
                </div>
              <div class="onlineNumber" v-text="(user.app_people_count || userList.length) +'人在线'"></div>
            </div>
            <div class="text-right" style="width: 50%;padding-top: 15px;float: right;" @click="operaBox(true)">
              <img src="../../image/search_icon.png" style="width: 20px;height:20px;margin-right: 15px;">
            </div>
        </div>
        <div v-show="!loading">
              <div class="mint-loadmore-top"></div>
              <div class="group">
                  <div class="onlineUser center" v-for="(item,index) in userList">
                          <div class="relative" :class="item.level_id>item.discover_level?'online-user-light':'online-user-gray'" >
                              <div  @click.stop="fnOpenPersonCenterWin(item.id)">
                                  <img  class="online-head absolute" v-if="item.head" :src="item.head" @error="errorimg(index)" />
                                  <img  class="online-head absolute" v-else src="../../image/default_head.png" />
                                  <img  class="vip-level absolute" v-if="item.level_id>0" :src="'../../image/vip_icon'+item.level_id+'.png'" />
                                  <!-- <div v-if="item.voice">
                                      <img src="../../../assets/img/voice_icon_white.png" style=".19rem;height: .26rem;">
                                  </div> -->
                                  <div class="new_tag absolute" v-if="item.reg_day<=1">
                                      <img src="../../image/new_icon.png" style="width: 18px;height: 18px;">
                                  </div>
                              </div>
                              <div v-if="item.voice" class="voice_tag" style="border-radius: 15px;width:22px;position: absolute!important;margin: 2px!important;" @click="playRidel(item.voice)">
                                <img v-if="(viderm != item.voice) || !radioStatus" src="../../image/voice_icon_white.png">
                                <img v-if="(viderm == item.voice) && radioStatus" src="../../image/voice_ing_white.gif">
                              </div>
                          </div>
                          <div class="flex" style="margin-top: 14px">
                             <!--  <div class="user_nickname moreDot">111111111111111</div> -->
                              <div class="user_nickname moreDot" v-text="item.nickname"></div>
                              <div class="sex-btn center flex" :class="item.sex==2?'sex-btn-female':'sex-btn-male'">
                                  <div>
                                    <img v-if="item.sex==2" src="../../image/sex-female.png" class="sex-icon" />
                                    <img v-else src="../../image/sex-male.png" class="sex-icon" />
                                  </div>
                                  <div><span v-text="item.birthday" style="font-size: 10px;color: #fff;line-height: 6px;"></span></div>
                              </div>
                          </div>
                          <div class="flex" style="margin-top: 5px;">
                            <img src="../../image/location_icon.png" class="city-icon">
                            <span class="city-text" v-text="item.city?item.city:'火星'"></span><span class="city-text" v-text="item.last_login_time"></span>
                          </div>
                  </div>
                  <div v-if="isAll" style="font-size: 16px;padding: 15px;">已经到底部了...</div>
              </div>        
          <div v-if="isSearch">
          <div class="popup z-fixed">
              <div class="bg" ></div>
              <div class="searchBox">
                <div class="relative">
                    <div class="bar">
                      <span class="search-title">筛选</span>
                      <img src="../../image/close_icon.png" class="close_icon absolute" @click="operaBox(false)" />
                    </div>
                    <div class="search-controller">
                        <p class="search-title-name">性别</p>
                        <div class="sex-radio flex">
                           <div class="item center" :class="{'active':sex==0}" @click="selectSex(0)">全部</div>
                           <div class="item center" :class="{'active':sex==1}" @click="selectSex(1)">男</div>
                           <div class="item center" :class="{'active':sex==2}" @click="selectSex(2)">女</div>
                        </div>
                    </div>
                    <div class="flex center" style="border-top:2px solid rgba(244,244,244,1);margin-top:24px;padding-top: 18px;">
                      <div class="btn btn-cancel" @click="operaBox(false)">取消</div>
                      <div class="btn btn-sure btn_gradient" @click="searchUser">确定</div>
                    </div>
                </div>
            </div>
          </div>
        </div>
        <div class="backTop" v-if="isBack" @click="backTop"></div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function() {
    loading(true);
    var audio = api.require('audio');
    var vm = new Vue({
        el: '#app',
        data: {
            baseUrl:'https://tbb.gvgcn.com/',
            topStatus:'',
            autoFill:false,
            page:1,
            row:12,
            userList:[],
            loadingMore:false,
            isAll:false, //是否全部加载完
            user:{on_line:1},
            type:1, //1在线 2隐身
            sex:0,
            isSearch:false,
            loading:false,
            platform:'h5',
            isBack:false,
            t:'',
            maxDistance:100,
            mini:true,
            time:0,
            style:{
              width:'7.5px'
            },
            h:0,
            el:null,
            startY:'',
            radioStatus:false,
            viderm:''
        },
        mounted:function(){

            var _this = this;
            
            //正式用这个
            //var audioStreamer = api.require('audioStreamer');
            
            this.getOnlineUser();
            this.getUserInfo();            
            //下拉刷新
            api.setRefreshHeaderInfo({
                loadingImg: 'widget://image/refresh.png',
                bgColor: '#ccc',
                textColor: '#fff',
                textDown: '下拉刷新...',
                textUp: '松开刷新...'
            }, function(ret, err) {
                _this.getOnlineUser();
            });
            
            //上拉加载,滑到底部执行操作
            api.addEventListener({
                name: 'scrolltobottom',
                extra: {
                    threshold: 80
                }
            }, function(ret, err) {
                if(!_this.isAll){
                    _this.page = _this.page+1;
                    _this.time = _this.userList[_this.userList.length-1].login_time;
                    _this.getOnlineUser();
                }else{
                    return;
                }
            });            

        },
        methods:{
            //播放音频
            playRidel:function(model){
                var _this = this;
                if(this.viderm == model && this.radioStatus){
                   audio.pause();
                   this.radioStatus = false;  //关闭状态
                }else {
                  
                  if(this.viderm != model){
                      this.viderm = model;
                      audio.stop();
                  }
                                              
                  audio.play({
                      path:model
                  },function(ret,err){
                     if(ret.duration > 0){                  
                          if(!ret.complete){
                              //alert(ret.duration+';'+ret.complete);
                              _this.radioStatus = true;                        
                          }
                          if(ret.complete){
                              _this.radioStatus = false;
                          }
                     }else{
                           _this.radioStatus = false;
                     }
                  })
                }
            },
            //加载更多
            errorimg:function(index){
                this.userList[index].head = "../../image/default_head.png";
            },
            setStatus:function(status){
              this.type = status;
              this.setUserStatus();
            },
            //选择性别
            selectSex:function(sex){
              this.sex = sex;
            },            
            handleTopChange:function(status) {
              this.topStatus = status;
            },
            //是否打开选择盒子
            operaBox:function(bool){
              this.isSearch = bool;
            },
            searchUser:function(){
              this.page = 1;
              this.time = 0;
              this.getOnlineUser();
              this.operaBox(false);
            },
            getUserInfo:function(){
               var _this = this;
               ajaxRequest({
                    method: 'GET',
                    url: 'api/user/info',
                    callback:function(res){
                        _this.loading = false;
                        _this.user = res.data;
                    }
                });
            },
            setUserStatus:function(){

              var _this = this;
               ajaxRequest({
                    url: 'api/user/setOnline',
                    method: 'POST',
                    data:{
                      type:this.type
                    },
                    callback:function(res){
                         _this.userNumber = res.data;
                         _this.getUserInfo();
                         //重新查第一页
                         _this.page = 1;
                         _this.time = 0;
                         _this.getOnlineUser();
                    }
                });
            },            
            //获取发现列表
            getOnlineUser:function(){
                var _this = this;
                ajaxRequest({
                    url: 'api/user/discover/list',
                    method: 'get',
                    data: {
                        p:this.page,
                        row:this.row,
                        sex:this.sex,
                        time:this.time
                    },
                    callback:function(res){
                        loading(false);
                        api.hideProgress();
                        if(_this.page == 1){
                            _this.userList = res.data;
                        }else{
                             _this.userList = _this.userList.concat(res.data);
                        }

                        if(res.data.length < _this.row){
                            _this.isAll = true;
                        }else{
                            _this.isAll = false;
                        }                        
                        api.refreshHeaderLoadDone();
                    }
                });              
            },
            fnOpenPersonCenterWin:function(id){
                openNewWin({
                  name:'../home/index',
                  params:{
                    uid:id
                  }
                })
            }            
        }

    })   

};

</script>

</html>
